<template>
  <el-container>
    <el-aside width="300px" class="content-left-list">
      <div class="ps-panel nav-left-menu" style="height: 100%">
        <div class="ps-panel-head">
          <i class="ps-panel-head-icon iconfont icon-guanxiwajue"></i>
          <span class="ps-panel-head-title">模型信息</span>
        </div>

        <div class="ps-panel-body">
          <el-tree
            :data="labels"
            node-key="id"
            :highlight-current="true"
            default-expand-all
            :expand-on-click-node="false"
            :props="{ label: 'labelName' }"
            @node-click="treeNodeClick"
          ></el-tree>
        </div>
      </div>
    </el-aside>
    <el-main class="content-main">
      <div class="ps-panel nav-left-menu" style="height: 100%">
        <div class="ps-panel-head">
          <i class="ps-panel-head-icon iconfont icon-list"></i>
          <span class="ps-panel-head-title">实例列表</span>
        </div>

        <div class="ps-panel-body">
          <el-table
            :data="currModelInstances"
            size="small"
            highlight-current-row
            stripe
            style="width: 100%; margin-bottom: 10px"
          >
            <el-table-column prop="id" label="序号"></el-table-column>
            <el-table-column prop="名称" label="名称"></el-table-column>
            <el-table-column prop="labels" label="模型名称"></el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="showOrEdit(scope.row)"
                  >编辑/查看</el-button
                >
                <el-popover
                  style="margin-left: 10px"
                  width="160"
                  trigger="manual"
                  :ref="'del_popover_' + scope.row.id"
                >
                  <p style="text-align: center; margin: 15px 0px">
                    确定删除吗？
                  </p>
                  <div style="text-align: center; margin: 0">
                    <el-button
                      size="mini"
                      @click="delPopoverClose('del_popover_' + scope.row.id)"
                    >
                      取消
                    </el-button>
                    <el-button
                      type="primary"
                      size="mini"
                      @click="delInstance(scope.row)"
                      >确定
                    </el-button>
                  </div>
                  <el-button
                    type="text"
                    slot="reference"
                    size="small"
                    @click="delPopoverShow('del_popover_' + scope.row.id)"
                    >删除
                  </el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              v-if="paginations.total > 0"
              :page-size="paginations.pageSize"
              :layout="paginations.layout"
              :total="paginations.total"
              :current-page="paginations.pageIndex"
              @current-change="getModelInstances"
              style="text-align: right"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      labels: [], //树数据
      currModelInstances: [], //表格数据
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 10, // 页显示多少条
        total: 0, // 总数
        layout: "total, prev, pager, next", // 翻页属性
      },
    };
  },
  methods: {
    treeNodeClick() {},
  },
};
</script>

<style lang="scss" scoped>
</style>